<template>
  <div class="app-container">
    <div class="container-center">
      <el-steps :active="0" class="mb-20">
        <el-step title="招标"></el-step>
        <el-step title="投标"></el-step>
        <el-step title="开标"></el-step>
        <el-step title="评标"></el-step>
        <el-step title="定标"></el-step>
        <el-step title="公示"></el-step>
      </el-steps>
      <el-card shadow="never" class="mb-20" :body-style="{ padding: 0 }">
        <div slot="header" class="clearfix">
          <span>项目基础信息</span>
        </div>
        <el-form :model="form" label-width="100px">
          <el-row :gutter="12">
            <el-col :md="12">
              <el-form-item label="招标名称">{{ form.title }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="招标编号">{{ form.code }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="采购单位">{{ form.company }}</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="招标方式">{{ form.way }}</el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <el-card shadow="never" class="mb-20" :body-style="{ padding: 0 }">
        <div slot="header">
          <span>物料明细</span>
        </div>
        <el-table :data="lists" highlight-current-row>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="物料名称" prop="name"></el-table-column>
          <el-table-column
            label="规格/型号"
            prop="model"
            width="280"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="数量"
            prop="num"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column
            label="单位"
            prop="unit"
            align="center"
            width="120"
          ></el-table-column>
          <el-table-column label="标准" prop="level"></el-table-column>
        </el-table>
      </el-card>

      <el-card shadow="never" class="mb-20">
        <div slot="header">
          <span>供应商要求</span>
        </div>
        <el-row :gutter="12">
          <el-form label-width="120px">
            <el-col :md="12"
              ><el-form-item label="招标方式">公开招标</el-form-item></el-col
            >
            <el-col :md="12">
              <el-form-item label="注册资金">450万元</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="等级要求">A,B,C</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="报价要求">
                含税含运--允许对80%物料进行报价
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="资质要求">
                ISO9001质量体系认证；ISO14001环境管理质量体系认证；ISO10012测量管理体系认证
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="廉洁承若书">廉洁承若书.pdf </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="报名要求说明"> </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>

      <el-card shadow="never" class="mb-20" :body-style="{ padding: 0 }">
        <div slot="header"><span>已选供应商</span></div>
        <el-table :data="suppliers" highlight-current-row>
          <el-table-column
            label="序号"
            type="index"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column label="供应商名称" prop="name"></el-table-column>
          <el-table-column label="综合得分" prop="score"></el-table-column>
          <el-table-column
            label="一年内有无交易记录"
            prop="have"
          ></el-table-column>
          <el-table-column
            label="服务关系"
            prop="relationship"
          ></el-table-column>
        </el-table>
      </el-card>

      <el-card shadow="never" class="mb-20">
        <div slot="header">
          <span>招标规则</span>
        </div>
        <el-row :gutter="12">
          <el-form label-width="120px">
            <el-col :md="12"
              ><el-form-item label="招标方式">公开招标</el-form-item></el-col
            >
            <el-col :md="12">
              <el-form-item label="注册资金">450万元</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="等级要求">A,B,C</el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="报价要求">
                含税含运--允许对80%物料进行报价
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="资质要求">
                ISO9001质量体系认证；ISO14001环境管理质量体系认证；ISO10012测量管理体系认证
              </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="廉洁承若书">廉洁承若书.pdf </el-form-item>
            </el-col>
            <el-col :md="12">
              <el-form-item label="报名要求说明"> </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-card>
      <el-card shadow="never" class="mb-20">
        <div slot="header"><span>附件</span></div>
        <el-form label-width="100px">
          <el-form-item label="招标单文件">
            <ul style="margin: 0">
              <li><a href="#">文件名1.rar</a></li>
              <li><a href="#">文件名2.rar</a></li>
              <li><a href="#">文件名3.rar</a></li>
            </ul>
          </el-form-item>
        </el-form>
      </el-card>
      <div class="text-center">
        <el-button
          type="primary"
          v-permission="['supplier']"
          @click="dialogVisible = true"
          size="large"
          >报名
        </el-button>
        <el-button size="large" @click="$router.go(-1)">关闭 </el-button>
      </div>
    </div>

    <el-dialog
      title="报名信息"
      :visible.sync="dialogVisible"
      width="50%"
      top="20px"
    >
      <div class="header-con">联系人信息</div>
      <el-form :model="basic" label-width="120px">
        <el-form-item label="联系人">
          <el-input v-model="form.contractor"> </el-input
        ></el-form-item>
        <el-form-item label="移动电话">
          <el-input v-model="form.mobile"> </el-input
        ></el-form-item>
        <el-form-item label="短信验证">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="报名说明">
          <el-input v-model="form.explain"></el-input>
        </el-form-item>
        <el-form-item label="备用联系人">
          <el-input v-model="form.contractor2"></el-input>
        </el-form-item>
        <el-form-item label="移动电话">
          <el-input v-model="form.mobile2"></el-input>
        </el-form-item>
      </el-form>
      <div class="header-con">报名要求附件</div>
      <el-form :model="basic" label-width="120px">
        <el-form-item label="投标委托书">
          <el-input v-model="form.contractor"></el-input>
        </el-form-item>
        <el-form-item label="上传投标委托书">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="廉洁承诺书">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="上传廉洁承诺书">
          <el-input v-model="form.explain"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEnter">确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      lists: [
        {
          name: "除尘布袋2",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 1,
          unit: "条",
          level: "安装孔板尺寸标准",
        },
        {
          name: "除尘布袋3",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 1,
          unit: "条",
          level: "安装孔板尺寸标准",
        },
        {
          name: "除尘布袋4",
          model: "规格：φ160*6500；覆膜克重：550",
          num: 1,
          unit: "条",
          level: "安装孔板尺寸标准",
        },
      ],
      suppliers: [
        {
          name: "南京玄建物资实业有限公司",
          score: "A",
          have: "无",
          relationship: "有",
        },
        {
          name: "扬州奔牛工贸实业有限公司",
          score: "B",
          have: "无",
          relationship: "有",
        },
        {
          name: "上海圣南实业有限公司",
          score: "B",
          have: "无",
          relationship: "无",
        },
      ],
      dialogVisible: false,
      basic: {
        constrator: "",
        mobile: "",
        code: "",
        explain: "",
        contractor2: "",
        mobile2: "",
      },
    };
  },
  methods: {
    handleEnter() {
      this.$message.success("报名成功！");
      setTimeout(() => {
        this.$router.push({
          name: "BiddingBidSupplier",
        });
      }, 500);
    },
  },
};
</script>

<style lang="scss" scoped>
.header-con {
  border-bottom: 1px dashed #ccc;
  padding: 5px 0 5px 10px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 22px;
  position: relative;
}
.header-con::after {
  content: "";
  display: block;
  width: 2px;
  height: 15px;
  background: #006ad4;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>
